<script setup>
  import { useI18n } from 'vue-i18n'
  import useAitype from '@/lib/hooks/useAitype.js'
  import useLoadingStore from '@/stores/loading'
  import useChats from '@/stores/chats'

  import { SendFilled, StopCircleOutlined } from '@vicons/material'
  import { Icon } from '@vicons/utils'

  const { locale } = useI18n()

  const emit = defineEmits(['send'])


  const inputRef = ref(null)

  const chats = useChats()
  const { aitypes } = useAitype()
  const loading = useLoadingStore()

  const message = ref('')

  const textareaStyles = computed(() => {
    let length = 1
    const max = message.value.length
    for (let i = 0; i < max; i++) {
      if (message.value[i] == '\n') {
        length++
      }
    }
    return {
      height: `${length * 24}px`
    }
  })

  watch(() => loading.talking, (n) => {
    if (!n) {
      nextTick(() => {
        inputRef.value.focus()
      })
    }
  })


  function send() {
    if (!message.value) return
    emit('send', message.value)
    message.value = ''
  }

  function handleKeydown(e) {
    if (e.isComposing || e.shiftKey) {
      return
    }
    if (e.key === 'Enter') {
      send()
    }
  }

  function setAitype(d, i) {
    chats.aitypeToggle(d.type)
  }

  function stop() {
    loading.stop()
  }
</script>

<template>
  <div class="relative p-3">
    <div class="absolute bottom-[100%] w-full p-2 flex items-center justify-center" v-if="loading.talking && loading.abortCtrl">
      <div class="flex items-center p-2 text-white bg-orange-500 rounded cursor-pointer hover:bg-orange-600" @click="stop">
        <Icon size="20" class="mr-2">
          <StopCircleOutlined />
        </Icon>
        <span class="text-sm">{{$t('stopResponding')}}</span>
      </div>
    </div>

    <div class="flex items-center gap-2 mb-3 overflow-x-auto text-xs text-slate-500">
      <div class="px-2 py-1 border rounded cursor-pointer shrink-0 hover:border-slate-500"
        :class="[chats?.chat?.aitype == d.type ? 'border-slate-500 bg-slate-200 text-slate-800' : 'border-slate-200']" v-for="d, i in aitypes" @click="setAitype(d, i)">
        {{locale === 'zh' ? d.name : d.en}}
      </div>
    </div>
    <div class="flex items-center p-2 rounded-md shadow-[0_0_15px_rgba(0,0,0,0.10)]" :class="[loading.talking ? 'bg-slate-100' : '']">

      <textarea tabindex="0" rows="1" :placeholder="$t('sendForm.placeholder')"
        class="box-border w-full p-0 pl-2 m-0 bg-transparent border-0 outline-none resize-none focus:ring-4 focus-visible:ring-0 md:pl-0"
        style="max-height: 200px; height: 24px; overflow-y: auto;" :style="textareaStyles" v-model.trim="message" @keydown.enter="handleKeydown" :disabled="loading.talking"
        ref="inputRef"></textarea>

      <div class="flex items-center justify-center w-8 h-8 ml-2 transition rounded cursor-pointer"
        :class="[message ? 'bg-green-500 text-white' : 'bg-slate-200 text-slate-500 hover:cursor-not-allowed']" @click="send">
        <Icon size="20">
          <SendFilled />
        </Icon>
      </div>

    </div>


    <div class="pt-3 text-xs text-center text-slate-400">Powered by Learning Mall</div>
  </div>
</template>